跳到主要内容

后端开发过程关闭 com.chrome.devtools.json 请求方法

6 分钟阅读

前言​

如果你在开发服务器过程中遇到这样的一个请求："/.well-known/appspecific/com.chrome.devtools.json"，或许你会很疑惑，自己的代码中并没有写这样的一个请求，其实它是 Chrome DevTools 发起的一个资源请求，核心目的是为了实现 “自动工作区文件夹” 功能 —— 让 DevTools 能自动识别本地开发服务器的项目结构，目的是跳过手动配置直接编辑并保存文件到本地源码。

但是作为开发者，开发环境后台输出意料之外的请求总是让人恼火，尤其对于不了解该功能的开发者，容易误以为是自己的路由配置或代码出现 bug。

解决方法​

针对这个请求，我们可以根据需求选择 “禁用” 或 “利用” 两种策略

禁用方法​

  1. 打开 Chrome 浏览器，在地址栏输入 chrome://flags/#devtools-project-settings；
  2. 在打开的页面中，找到 "DevTools Project Settings" 选项并设置为 "Disabled";
  3. 重启浏览器，后续将不再发起该请求。

深入了解 com.chrome.devtools.json​

当你在工作本地项目时打开 Chrome DevTools，它会自动向 URL /.well-known/appspecific/com.chrome.devtools.json 发送请求以检查特定的 JSON 文件。此文件包含有关你的项目文件夹结构的信息，使 DevTools 能够将你的本地文件映射到浏览器中加载的资源。

触发条件​

其实这个请求并非所有场景下都会出现，它的触发有严格限制：

  • 仅当项目运行在localhost（本地开发服务器）时触发；
  • 仅在开发模式下，且 Chrome DevTools 处于打开状态；
  • 仅 Chromium 内核浏览器（Chrome、Edge、Brave 等）会发起该请求，Firefox 等其他浏览器无此行为。

功能背景​

该请求是 Chrome DevTools 在 M-135 版本（2025 年发布）新增的 “Automatic Workspace Folders”的功能，在这个功能出现之前，Chrome 的 Workspace 功能虽能实现 “DevTools 编辑→本地文件同步”，但存在两大问题：一是需要手动配置文件映射，操作繁琐且不直观；二是多项目切换时需重复设置，易用性极差。而 “Automatic Workspace Folders” 功能通过自动识别项目结构，完美解决了这两个痛点 Chrome 开发者工具中的自动 Workspace 连接。

文件：com.chrome.devtools.json 的规范​

DevTools 之所以发起请求，是为了获取一个特定的 JSON 文件，该文件需满足以下要求：

  • 路径位置：必须放在项目根目录的 /.well-known/appspecific/ 文件夹下；
  • 核心结构：包含 workspace 对象，且必须有两个属性：
    • root：项目文件夹的绝对路径（如 /Users/foobar/Projects/my-awesome-web-project）；
    • uuid：项目唯一标识，推荐使用 v4 版本 UUID（可通过 npx uuid v4 生成）。

示例文件内容如下：

json

{
  "workspace": {
    "root": "/Users/foobar/Projects/my-awesome-web-project",
    "uuid": "53b029bb-c989-4dca-969b-835fecec3717"
  }
}

如果服务器无法返回该文件，就会出现 404 错误 —— 这也是大多数开发者遇到的核心问题，因为 Remix、Next.js、SvelteKit 等主流框架默认都没有配置该路由。

充分利用 com.chrome.devtools.json​

如果想充分利用 Chrome 的这个实用功能，只需让服务器正确返回 JSON 文件即可。不同框架有不同的实现方式，以下是主流场景的配置指南：

通用手动配置（适用于所有框架）​

  1. 在项目根目录创建文件夹：/.well-known/appspecific/；
  2. 在该文件夹下创建 com.chrome.devtools.json 文件，按规范填写 root 和 uuid；
  3. 确保服务器能正常访问该静态文件（如使用 npx serve 启动简单服务器）。

框架专属配置（更高效）​

  • Vite 项目（React、Svelte 等）：使用 vite-plugin-devtools-json 插件自动生成文件，无需手动配置：

    1. 安装插件：npm install --save-dev vite-plugin-devtools-json；

    2. 在 vite.config.js 中引入：

      javascript

      运行

      import { defineConfig } from 'vite';
      import devtoolsJson from 'vite-plugin-devtools-json';

      export default defineConfig({
        plugins: [devtoolsJson()],
      });

  • Remix 项目：创建路由文件 app/routes/[.]well-known.appspecific.[com.chrome.devtools.json].tsx，添加 loader 函数：

    typescript

    运行

    import { json } from '@remix-run/node';

    export const loader = async () => {
      return json({
        workspace: {
          root: process.cwd(),
          uuid: '6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b',
        },
      });
    };

  • Next.js 项目：在 app/.well-known/appspecific/com.chrome.devtools.json/ 目录下创建 route.js：

    javascript

    运行

    export async function GET() {
      return Response.json({
        workspace: {
          root: process.cwd(),
          uuid: '6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b',
        },
      });
    }

优点：启用 “自动工作区文件夹” 功能，实现 DevTools 实时编辑本地文件，提升调试效率；

缺点：需要少量配置，新增文件会带来轻微的维护成本。

如何使用 “Automatic Workspace Folders” 功能​

配置完成后，即可享受该功能带来的高效调试体验，步骤如下：

  1. 启动本地开发服务器（如 npm run dev），确保项目运行在localhost；
  2. 打开 Chrome DevTools（快捷键 Ctrl+Shift+I 或 Cmd+Option+I）；
  3. 切换到 Sources 标签，找到 Workspace 面板；
  4. 点击项目文件夹旁的 “Connect”，并允许 DevTools 访问本地文件；
  5. 此后在 DevTools 中编辑 HTML、CSS、JS 文件，更改会自动保存到本地源码，文件旁会显示绿色圆点表示映射成功。

常见问题与最佳实践​

1. troubleshooting 常见问题​

  • 禁用功能后请求仍存在：清除浏览器缓存或重新启动 Chrome；
  • Brave 浏览器也出现该请求：Brave 基于 Chromium 内核，需在 brave://flags/#devtools-project-settings 中禁用；
  • UUID 无效报错：使用 npx uuid v4 生成标准 v4 UUID，避免手动编写；
  • 配置后文件无法访问：检查服务器是否正确配置静态文件访问，或路由是否匹配。

2. 最佳实践建议​

  • 团队协作：如果选择支持该功能，建议在项目 README 中添加配置说明，确保团队成员统一环境；
  • 优先使用插件：Vite 项目推荐直接使用 vite-plugin-devtools-json，避免手动维护 JSON 文件；
  • 生产环境无需关注：该请求仅在localhost开发环境触发，不会影响线上应用；
  • 避免误屏蔽：服务器端屏蔽时，确保仅针对该特定路径，不要影响 Let’s Encrypt 等其他依赖 .well-known 路径的服务。

总结​

这个看似“烦人”的 /.well-known/appspecific/com.chrome.devtools.json 请求，本质是 Chrome 为提升调试体验而推出的实用功能。因此无需被它的 404 错误困扰，根据自身需求，要么直接禁用省心省力，要么配置启用享受高效调试。

对于追求开发效率的开发者来说，只需简单几步就能解锁 “DevTools 实时编辑本地文件” 的强大能力，可以让调试流程更顺畅。

评论
0条评论

添加新评论

昵称
邮箱
网址
0%